<template>

  <!-- 头部导航区内容 -->
  <div class="header">
    <img class="header-logo" src="@/assets/images/HuiZhang.png">
    <div class="header-navigation">
      <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item v-for="item in navigatorData" :key="item.name" :index="item.path">{{item.name}}</el-menu-item>
      </el-menu>
      <button class="back" @click=loginout()>退出登录</button>
    </div>

  </div>
</template>

<script>
import request from '@/utils/request'
import {removeToken } from '@/utils/auth'

export default {
  props: {
    jump: {},
  },
  data () {
    return {
      activeIndex: '',
      navigatorData: [],
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath);
    },
    // 获取当前用户登录信息，通过登录信息中的role字段判断用户角色，根据角色的不同将navigatorData赋上不同的值来展示不同的菜单
    getUserInfo () {
      request({
        url: `/getInfo`,
        method: 'get'
      }).then(res => {
        if (res.roles.includes('bzr')) {
          this.navigatorData = [
            { name: "班级", path: "/goclass" },
            { name: "统计", path: "/statistical" },
            { name: "寄语", path: "/remarks" },
            { name: "我的", path: "/myInfoTeacher" },
          ]
        }
        else if (res.roles.includes('parent')) {
          this.navigatorData = [
            { name: '成长报告', path: "/report1" },
            { name: '图片库', path: "/gallery" },
            { name: '个人信息', path: "/myInfo" }
          ]
        }
        else if (res.roles.includes('teacher')) {
          this.navigatorData = [
            { name: "班级", path: "/goclass" },
            { name: "寄语", path: "/remarks" },
            { name: "我的", path: "/teachClasses" },
          ]
        }
      })
    },
    async backlogin () {
      const res = await backlogin()
    },
    loginout () {
      this.$confirm('您确认退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        removeToken()
        this.$router.go(0)
      })
      .catch((err) => err)
        .then(() => {
          this.backlogin()
          //刷新一次页面
          location.reload()
          this.$router.go(0)
          window.localStorage.clear()
        })
        .catch((err) => err)
    }
  },
  created () {
    this.activeIndex = this.$route.meta.activeMenu
    this.getUserInfo()
  }
}
</script>

<style scoped>
.el-menu.el-menu--horizontal {
  border-bottom: solid 1px transparent !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 4px solid #7c0000;
  color: #7c0000;
}
.el-menu-item {
  font-size: 1.125rem;
  padding: 0;
  margin: 0 0.9375rem;
  height: 2.5rem;
  line-height: 2.5rem;
  color: #000;
}
/* 头部导航区内容 */
.header {
  position: relative;
  /* height: 4.75rem; */
  height: 76px;
  /* margin: 20px 48px 20px 160px; */
  padding: 20px 0;
  width: 70%;
  margin: 0 auto;
  box-sizing: content-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-logo {
  width: 5rem;
  height: 3.75rem;
  /* position: absolute; */
}

/* 导航区 */
.header-navigation {
  display: flex;
  align-items: center;
  /* position: absolute;
  right: 0; */
}

/* 标签导航区 */
.navigation-ecah {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.875rem 0rem 0 1.5625rem;
  background: #ffffff;
}
.back {
  margin-left: 10rem;
  /* margin-right: 2rem; */
  cursor: pointer;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  background-color: #7c0000;
  color: #ffffff;
  border: #7c0000;
  border-radius: 6%;
}
</style>